<template>
    <div>
      <div class="apply-head">
        <img @click="fan()" :src="'./static/lyl/back.png'" alt="">
        <span>报名成功</span>
      </div>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,index) in swiperimg" :key="index">
            <img :src="item" :alt="item">
          </div>
        </div>

        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>

      <div class="applyS">
        <div class="act2-hed">
          <p>
            <span>{{title}}</span>
            <span>{{apply}}</span>
          </p>
          <p>
            <span>点赞</span>
            <span>{{like}}</span>
            <span>投票</span>
            <span>{{vote}}</span>
          </p>
          <p>{{hold_start_time}}-{{hold_end_time}}</p>
        </div>
        <p>参赛节目</p>
        <div class="apply-tit" v-for="(item,index) in programData" :key="index">
          <img :src="item.img" alt="">
          <div class="apply-right">
            <p>{{item.name}}</p>
            <p>{{item.introduce}}</p>
          </div>
        </div>
        <p>参赛者</p>
        <div class="apply-fot">
          <p v-for="(item,index) in proginfoData" :key="index">
            <span>{{item.nickname}}</span>
            <span>{{item.sex==1?'男':'女'}}</span>
            <span>{{item.age}}</span>
            <span>{{item.mobile}}</span>
          </p>
          <p>报名成功</p>
          <button>邀请报名成员</button>
        </div>
      </div>

    </div>
</template>

<script>
  import Swiper from 'swiper'
  import * as list from "../../../api/list.js";
    export default {
      name: "Applysucess",
      data(){
        return{
          swiperimg:[],
          title:'',
          apply:'',
          like:'',
          vote:'',
          hold_start_time:'',
          hold_end_time:'',
          proginfoData:[],
          programData:[]
        }
      },
      methods:{
        fan(){
          history.go(-1);
        }
      },
      beforeMount(){
        let parmes = {id:this.$route.params.id};
        list.activeDetail(parmes).then(res=>{
          this.title = res.data.title;
          this.apply = res.data.apply;
          this.like = res.data.like;
          this.vote = res.data.vote;
          this.hold_start_time = res.data.hold_start_time;
          this.hold_end_time = res.data.hold_end_time;
          this.swiperimg = res.data.main_pic;
          this.$nextTick(() => {  // 下一个UI帧再初始化swiper
            var swiper = new Swiper('.swiper-container', {
              autoplay:true,
              loop : true,
              pagination: {
                el: '.swiper-pagination',
              },
            });
          })
        });

        let parms = {
          user_id:this.$store.state.user_id,
          program_id:this.$route.params.id2
        };
        list.applySuccess(parms).then(res=>{
          console.log(res);
          this.programData = res.data.program;
          this.proginfoData = res.data.contestant;
        })
      },
      mounted(){
        mui.back = function() {
          window.history.go(-1);
        }
      }
    }
</script>

<style scoped>
  .apply-head{
    padding: 40px;
  }
  .apply-head img{
    width: 22px;
    margin-right: 30px;
  }
  .apply-head span{
    font-size: 36px;
    vertical-align: 15%;
  }

  .applyS{
    padding: 30px 40px;
  }
  .applyS>p{
    font-size: 28px;
    line-height: 63px;
  }
  .applyS .act2-hed{
    margin-bottom: 50px;
  }
  .applyS .act2-hed p:nth-child(1){
    display: flex;
    justify-content: space-between;
  }
  .applyS .act2-hed p:nth-child(1) span:nth-child(1){
    font-size: 32px;
    font-weight: bold;
  }
  .applyS .act2-hed p:nth-child(1) span:nth-child(2){
    width: 100px;
    height: 40px;
    border-radius: 5px;
    font-size: 24px;
    color: #fff;
    background: #e98345;
    text-align: center;
    line-height: 40px;
  }
  .applyS .act2-hed p:nth-child(2){
    font-size: 26px;
    color: #8c8c8c;
    margin: 30px 0;
  }
  .applyS .act2-hed p:nth-child(2) span{
    margin-right: 40px;
  }
  .applyS .act2-hed p:nth-child(3){
    font-size: 24px;
    color: #8c8c8c;
    padding-left: 60px;
  }
  .apply-tit{
    display: flex;
    padding: 10px 20px;
  }
  .apply-tit img{
    width: 180px;
    height: 110px;
    margin-right: 20px;
  }
  .apply-tit .apply-right p:nth-child(1){
    font-size: 28px;
  }
  .apply-tit .apply-right p:nth-child(2){
    font-size: 24px;
    line-height: 36px;
    color: #8c8c8c;
  }
  .apply-fot p:nth-child(1){
    display: flex;
    justify-content: space-around;
  }
  .apply-fot p{
    padding: 20px;
  }
  .apply-fot p span{
    font-size: 26px;
  }
  .apply-fot p span:last-child{
    margin-right: 0;
  }
  .apply-fot p:nth-child(2){
    font-size: 72px;
    color: #33cc66;
    text-align: center;
    padding: 40px 0;
  }
  .apply-fot button{
    font-size: 36px;
    color: #fff;
    background: #884ca4;
    height: 80px;
    width: 100%;
    border-radius: 10px;
  }
</style>
